<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="keywords" content="华为电子表,太空表">
		<meta name="author" content="新新小朋友">
		<link rel="icon" type="image/x-icon" href="./太空人.gif"/>
		<title>太空人</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: "led regular";
			}

			div {
				box-sizing: border-box;
			}

			@font-face {
				font-family: "led regular";
				src: url("./Open 24 Display St.ttf");
			}

			.banner {
				width: 700px;
				height: 700px;
				border: 20px solid #000;
				margin: 20px auto;
				border-radius: 50%;
				overflow: hidden;
				user-select: none;
			}

			.banner .header {
				width: 100%;
				height: 25%;
				float: left;
				border-bottom: 5px solid #000;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
			}

			.banner .header .left {
				width: 40%;
				height: 100%;
				border-right: 5px solid #000;
			}

			.banner .header .right {
				width: 60%;
				height: 100%;
			}

			.banner .body {
				width: 100%;
				height: 55%;
				float: left;
			}

			.banner .footer {
				width: 100%;
				height: 20%;
				float: left;
				border-top: 5px solid #000;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.banner .footer .top {
				width: 100%;
				height: 50%;
				display: flex;
			}

			.banner .footer .under {
				width: 100%;
				height: 50%;
				display: flex;
			}

			.banner .footer .top .estate,
			.banner .footer .top .distance {
				width: 35%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 30px;
				font-weight: bold;
				font-family: "微软雅黑";
			}

			.banner .footer .top .estate {
				text-indent: 120px;
			}

			.banner .footer .top .distance {
				text-indent: -100px;
			}

			.banner .footer .top .km {
				width: 30%;
				height: 100%;
				border-right: 5px solid #000000;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 35px;
				font-weight: bold;
				letter-spacing: 2px;
				font-family: "微软雅黑";
			}

			.banner .footer .under .null {
				width: 35%;
				height: 100%;
			}

			.banner .footer .under .km {
				width: 30%;
				height: 100%;
				border-top: 5px solid #000;
				border-left: 5px solid #000;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 35px;
				font-weight: bold;
				letter-spacing: 2px;
				font-family: "微软雅黑";
			}

			.banner .body .up {
				width: 100%;
				height: 100px;
				position: relative;
			}

			.banner .body .up .time {
				width: 250px;
				height: 100px;
				font-size: 130px;
				line-height: 80px;
				display: flex;
				margin: 10px auto;
				letter-spacing: 5px;
			}

			.banner .body .up .time .houer {}

			.banner .body .up .time .solid {
				width: 20px;
				height: 100%;
				margin: 0 10px 0 5px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
			}

			.banner .body .up .time .solid span {
				width: 10px;
				height: 10px;
				background-color: #000;
			}

			.banner .body .up .miao {
				width: 50px;
				height: 50px;
				position: absolute;
				margin-right:5px;
				bottom: 0;
				right: 19%;
				font-size: 60px;
				line-height: 50px;
			}

			.banner .body .model {
				width: 100%;
				height: 170px;
				position: relative;
				overflow: hidden;
				background-color: #fff;
			}

			.banner .body .model .img {
				width: 240px;
				height: 220px;
				margin: 10px auto;
				background: url(./太空人.gif) no-repeat;
				background-size: cover;
				transform: rotate(-70deg);
			}

			.banner .body .model .img img {
				width: 100%;
				height: 100%;
			}

			.banner .body .model .date {
				width: 150px;
				height: 50px;
				position: absolute;
				right: 20px;
				top: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				font-size: 20px;
				font: "agency fb";
				font-weight: bold;
			}

			.banner .body .model .date .month {
				font-family: "微软雅黑";
			}

			.banner .body .model .date .day {
				font-family: "微软雅黑";
				margin-top: 5px;
			}
			.banner .body .model .city{
				width: 100px;
				height: 50px;
				float: left;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 40px;
				margin: auto;
				font-family: "微软雅黑";
				font-size: 25px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;
			}
			.banner .body .model .city .img{
				width: 50px;
				height: 50px;
				background: none;
				transform: rotate(0deg);
			}
			.banner .body .model .city .img img{
				width: 100%;
				height: 100%;
			}
			.banner .body .down {
				width: 100%;
				height: 80px;
				overflow: hidden;
			}

			.banner .body .down .rate {
				width: 110px;
				height: 50px;
				margin-left: 60px;
				margin-top: 10px;
				float: left;
			}

			.banner .body .down .rate .num {
				font-family: "微软雅黑";
				font-weight: bolder;
				font-size: 20px;
			}

			.banner .body .down .rate img {
				width: 45px;
				height: 40px;
				margin-left: 20px;
				float: left;
			}

			.banner .body .down .rate .number {
				float: right;
				font-size: 25px;
				font-family: "微软雅黑";
				font-weight: 500;
			}

			.banner .body .down .steps {
				width: 140px;
				height: 50px;
				float: right;
				margin-right: 70px;
				font-size: 24px;
				bottom: 0;
				margin-top: 40px;
			}

			.banner .body .down .steps .img {
				width: 50px;
				height: 30px;
				background: url(./步数.png) no-repeat;
				background-size: cover;
				float: left;
				margin-right: 10px;
			}

			.banner .body .down .steps span {
				font-family: "微软雅黑";
				font-weight: bold;
			}

			.banner .header .left .img {
				width: 70px;
				height: 70px;
				float: right;
				margin-top: 30px;
				background: url(火箭.png) no-repeat;
				background-size: cover;
			}

			.banner .header .left .process {
				width: 100px;
				height: 50px;
				float: right;
				margin-top: 110px;
				margin-right: -20px;
				font-family: "微软雅黑";
				font-size: 40px;
				text-align: center;
				line-height: 50px;
				font-weight: bold;
				letter-spacing: 2px;
			}

			.banner .header .right {
				padding-left: 20px;
				padding-top: 20px;
				font-size: 26px;
			}

			.banner .header .right p {
				font-family: "微软雅黑";
			}

			.banner .header .right .weather,
			.banner .header .right .temperature {
				width: 150px;
				height: 30px;
				line-height: 30px;
				margin-bottom: 10px;
				position: relative;
			}

			.banner .header .right .weather p:nth-child(1) {
				float: left;
			}

			.banner .header .right .weather p:nth-child(2) {
				float: right;
			}

			.banner .header .right .temperature p:nth-child(1) {
				float: left;
				left: 0;
				position: absolute;
			}

			.banner .header .right .temperature p:nth-child(2) {
				float: right;
			}

			.banner .header .right p:nth-child(1) {
				margin-bottom: 15px;
			}

			.banner .header .right .weather .img,
			.banner .header .right .temperature .img {
				float: right;
				margin-right: -70px;
				width: 30px;
				height: 30px;
			}

			.banner .header .right .temperature {
				padding-right: 6px;
			}

			.banner .header .right .weather .img img,
			.banner .header .right .temperature .img img {
				width: 100%;
				height: 100%;
			}

			.banner .header .right .change {
				width: 70px;
				height: 70px;
				float: right;
				margin-top: -60px;
				margin-right: 110px;
			}

			.banner .header .right .change img {
				width: 100%;
				height: 100%;
			}
			.oncontextmenu{
				width: 250px;
				/* height: 300px; */
				background-color: #202124;
				position: absolute;
				z-index: 9999;
				padding: 5px 0;
				background: url(太空人.gif) no-repeat;
				background-size: cover;
				display: none;
			}
			.oncontextmenu div{
				width: 100%;
				height: 35px;
				background-color: rgba(218, 224, 243,.6);
				font-family: "微软雅黑";
				display: flex;
				padding: 0 10px;
				justify-content: space-between;
				line-height: 35px;
			}
			.oncontextmenu div:hover{
				/* background-color: rgba(218, 224, 243,.6); */
				background-color:rgba(182, 187, 204,.9);
			}
			.oncontextmenu div span{
				font-family: "微软雅黑";
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			window.onload = () => {
				let h = document.querySelector(".houer")
				let f = document.querySelector(".minute")
				let s = document.querySelector(".miao")
				let months = document.querySelector(".month")
				let days = document.querySelector(".day")
				let number = document.querySelector(".number")
				let bs = document.querySelector(".bs")
				let process = document.querySelector(".process")
				let quantity = parseInt(process.innerText)
				// 时间
				time()
				date()

				//心率 步数
				function heartbeat() {
					let num = ~~(80 + Math.random() * 10 + Math.random() * 10 + Math.random() * 10 + Math.random() * 10)
					number.innerText = num
					bs.innerText = ++bs.innerText
				}
				setInterval(() => {
					heartbeat()
				}, 1000)

				// 电量
				function electricity() {
					quantity--
					process.innerHTML = `${quantity}%`
					if (quantity <= 1) {
						quantity = 1
					}
				}
				setInterval(() => {
					electricity()
				}, 5000)

				function time() {
					let data = new Date()
					let s1 = data.getHours() < 10 ? "0" + data.getHours() : data.getHours()
					let s2 = data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes()
					let s3 = data.getSeconds() < 10 ? "0" + data.getSeconds() : data.getSeconds()
					h.innerText = s1
					f.innerText = s2
					s.innerText = s3
					requestAnimationFrame(time)
				}

				setInterval(function() {
					date()
				}, 1000 * 60)

				function date() {
					let data = new Date();
					let month = data.getMonth() + 1
					let day = data.getDate()
					let week = data.getDay()
					// months.innerHTML = `${month}月${day}`
					week = transformation(week)
					days.innerHTML = `周${week} ${month}-${day}`


				}

				// 日期转换
				function transformation(data) {
					let val = null
					switch (parseInt(data)) {
						case 1:
							val = "一"
							break;
						case 2:
							val = "二"
							break;
						case 3:
							val = "三"
							break;
						case 4:
							val = "四"
							break;
						case 5:
							val = "五"
							break;
						case 6:
							val = "六"
							break;
						case 7:
							vval = "七"
							break;
					}
					return val
				}
			}
		</script>
	</head>
	<body>
		<!-- bgm -->
		<audio src="./1.mp3" autoplay loop ></audio>
		<!-- 太空人 -->
		<div class="banner">
			<!-- 顶部 -->
			<div class="header">
				<!-- 当前电量，可变化 -->
				<div class="left">
					<div class="img"></div>
					<div class="process">100%</div>
				</div>
				<!-- 当前天气状况，可变化 -->
				<div class="right">
					<!-- 天气状况 -->
					<p class="status">空气优质</p>
					<div class="weather">
						<p id="s1">晴天</p>
						<p id="s2">26°</p>
						<p class="img">
							<img src="三角形_上.png" alt="如图片无法加载,请联系新新小朋友">
						</p>
					</div>
					<div class="temperature">
						<p id="now">25°C</p>
						<p id="s3">20°</p>
						<p class="img">
							<img src="三角形.png" alt="如图片无法加载,请联系新新小朋友">
						</p>
					</div>
					<div class="change">
						<img id="change" src="./太阳.png" alt="如图片无法加载,请联系新新小朋友">
					</div>
				</div>
			</div>
			<!-- 中间 -->
			<div class="body">
				<!-- 时间显示 -->
				<div class="up">
					<!-- 时分 -->
					<div class="time">
						<span class="houer">16</span>
						<span class="solid">
							<span></span>
							<span></span>
						</span>
						<span class="minute">57</span>
					</div>
					<!-- 秒 -->
					<div class="miao">
						54
					</div>
				</div>
				<div class="model">
					<!-- 显示当前城市 -->
					<div class="city" id="city">
						<div class="img">
							<img src="位置.png" >
						</div>
						兰州
					</div>
					<!-- logo -->
					<div class="img">
						<!-- <img src="./太空人.gif" alt="图片无法加载,请联系新新小朋友"> -->
					</div>
					<!-- 日期 -->
					<div class="date">
						<p class="month">二月初十</p>
						<p class="day">周一 3-22</p>
					</div>
				</div>
				<div class="down">
					<!-- 心率 -->
					<div class="rate">
						<p class="num">80-128</p>
						<img src="./面性心率图标.png" alt="">
						<!-- 可变化的心率值 -->
						<p class="number">89</p>
					</div>
					<!-- 步数 -->
					<div class="steps">
						<div class="img"></div>
						<span class="bs">12345</span>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="footer">
				<div class="top">
					<div class="estate">睡眠</div>
					<div class="km">7h30m</div>
					<div class="distance">距离</div>
				</div>
				<div class="under">
					<div class="null"></div>
					<div class="km">8.66km</div>
					<div class="null"></div>
				</div>
			</div>
		</div>
		<!-- 右键菜单 -->
		<div class="oncontextmenu">
			<div>
				<span>制作者</span>
				<span>新新小朋友</span>
			</div>
			<div>
				<span>切换城市</span>
				<span>点击切换</span>
			</div>
			<div>
				<span>前进</span>
				<span>Alt+右箭头</span>
			</div>
			<div>
				<span>后退</span>
				<span>Alt+左箭头</span>
			</div>
			<div>
				<span>重新加载</span>
				<span>Ctrl+R</span>
			</div>
		</div>
	</body>
	<!-- 引入鼠标右键事件 -->
	<script src="change.js" type="text/javascript" charset="utf-8"></script>
	<!-- 用jQuery封装的Ajax获取天气 -->
	<script type="text/javascript">
		$(() => {
			let show = document.querySelector(".oncontextmenu")
			let city = "大同"
			let btn = [...document.querySelectorAll(".oncontextmenu div")]
			document.addEventListener("contextmenu", function(even) {
				even = even || window.event
				even.preventDefault()
				let x = even.clientX
				let y = even.clientY
				let scrollY = document.documentElement.scrollTop
				let scrollX = document.documentElement.scrollLeft
				show.style.left = x + scrollX + "px"
				show.style.top = y + scrollY + 'px'
				showInit()
			}, false)
			document.addEventListener("click", function() {
				hideInit()
			}, false)
			
			function showInit() {
				show.style.display = 'block'
			}
			
			function hideInit() {
				show.style.display = 'none'
			}
			
			for (let i in btn) {
				btn[i].addEventListener("click", function() {
					changeInit(i)
				}, false)
			}
			
			function changeInit(index) {
				switch (parseInt(index)) {
					case 0:
						let arr = ["相遇即是缘分","漂流过海来找你",'只是一个小朋友']
						alert(arr[(Math.random()*3)|0])
						break;
					case 1:
						city = prompt("请输入城市名:")
						if(city){
							wether()
						}
						break;
					case 2:
					window.location.href = history.go(1)
						break;
					case 3:
					window.location.href = history.go(-1)
						break;
					case 4:
						 location.reload()
						break;
				}
			}
				
			let imgArr = ["多云.png", "霾.png", '太阳.png', '下雨.png', '下雪.png']
			$("#city")[0].innerHTML = `
			<div class="img">
							<img src="位置.png" >
			</div>
					${city}`
					
			wether()
			// 利用promise解决异步
			function wether(){
				new Promise((resovled, rejected) => {
					$.ajax({
						url: "http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz",
						type: "GET",
						data: {
							appid: "26891764",
							appsecret: "SV5XuXWi",
							version: "v9",
							city: `${city}`
						},
						success: resovled,
						error: rejected
					})
				}).then((res) => {
					$(".status").html(`${res.data[0].air_tips.split('，')[0]}`)
					$("#s1").html(`${res.data[0].wea}`)
					$("#s2").html(`${res.data[0].tem1}°`)
					$("#s3").html(`${res.data[0].tem2}°`)
					$("#now").html(`${res.data[0].tem}°`)
					$("#city").html(`
					<div class="img">
						<img src="位置.png" >
					</div>
					${city}
					`) 
					tianqi(res.data[0].wea)
				}).catch((err) => {
					alert("天气获取失败,404,请联系新新小朋友")
				})
			}

			function tianqi(res) {
				if (res.indexOf("多云") >= 0) {
					$("#change")[0].src = imgArr[0]
				} else if (res.indexOf("霾") >= 0) {
					$("#change")[0].src = imgArr[1]
				} else if (res.indexOf("晴") >= 0) {
					$("#change")[0].src = imgArr[2]
				} else if (res.indexOf("小雨") >= 0 || res.indexOf("雨") >= 0 || res.indexOf("大雨") >= 0) {
					$("#change")[0].src = imgArr[3]
				} else if (res.indexOf("小雪") >= 0 || res.indexOf("雪") >= 0 || res.indexOf("大雪") >= 0) {
					$("#change")[0].src = imgArr[4]
				}
			}
		})
	</script>
	<!-- 引入农历 -->
	<script src="./data.js" type="text/javascript" charset="utf-8"></script>
</html>
